<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章详情</title>
     <link rel="stylesheet" href="/libs/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="/css/index.css">
    <style>
        .comment {
            border: 1px #00CCFF solid;
        }

        .comment .add-comment {
            margin-bottom: 20px;
        }

        .comment .comment-list {
            width: 400px;
        }

        .comment .comment-list li {
            margin-bottom: 20px;
            border: 1px solid #ccc;
        }

        .comment-list li p:first-child {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
    </style>
    <!-- 引入js文件 -->
    <script src="/libs/js/jquery.js"></script>
    <script src="/libs/js/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script src="/libs/js/art-template.js"></script>
    <script src="/libs/layui/layui.js"></script>
    <!-- axios的拦截器 -->
    <script src="/js/base.js"></script>
</head>

<body>
    <div id="header">
        <img src="/images/logo1.png" alt="logo" />
        <ul>
            <li><a class="register" href="/register.html">会员注册</a>/</li>
            <li><a class="login" href="#">登陆</a></li>
        </ul>
    </div>

    <div id="nav">
        <ul>
            <script type="text/html" id="catesTpl">
                <li><a href="/">首页</a></li>
                {{each cates v }}
                <li><a class="{{v.id===cate_id ? 'active' : ''}}"
                        href="/index_list.html?cate_id={{v.id}}">{{v.cate_name}}</>
                </li>
                {{/each}}
            </script>
        </ul>
    </div>

    <div class="blank20"></div>

    <div class="article">
        <script type="text/html" id="contentTpl">
            <h3>{{row.title}}</h3>
            <p align="right">访问量为:
                <span style="color: red;margin-right: 10px;">{{row.view_nums}}
                </span>发布时间:<span>{{row.add_time|dateFormat}}</span>
            </p>
            <p>
                {{@ row.content }}
            </p>
            <p align="right">
                编辑: {{row.author}}
            </p>
        </script>
    </div>

    <!-- 评论区域 -->
    <div class="comment">
        <div class="add-comment">
            <textarea name="" id="fb-content" cols="50" style="resize: none;" rows="10"></textarea><button class="fb">发表</button>
        </div>
        <ul class="comment-list">
            <script type="text/html" id="commentsTpl">
                {{each comments v}}
                <li>
                    <p><span>{{v.User.nickname}}</span> <span>{{v.add_time|dateFormat}}</span></p>
                    <p>{{v.content}}</p>
                </li>
                {{/each}}
            </script>
        </ul>
    </div>


    <div class="blank20"></div>

    <div id="footer">
        <p>版权所有&copy;上海快简教育<br />联系方式：&nbsp;&nbsp;18665455185</p>
    </div>
    <!-- 登录 -->
    <script src="/js/login.js"></script>
    <script src="/js/news_content.js"></script>
</body>

</html>